<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>可编辑文件列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script>
	function AddRow(table, index) {
		var lastRow = table.rows[table.rows.length - 1];
		alert(lastRow);
		var newRow = lastRow.cloneNode(true);
		table.tBodies[0].appendChild(newRow);

		$('#users a').editable();

		$('.status').editable({
			type : 'select',
			title : '请选择完成状态',
			placement : 'right',
			value : 1,
			source : [ {
				value : 1,
				text : '暂无'
			}, {
				value : 2,
				text : '进行中'
			}, {
				value : 3,
				text : '完成'
			} ]
		/*
		//uncomment these lines to send data on server
		,pk: 1
		,url: '/post'
		 */
		});
		return newRow;

	}
</script>
</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>
		<div class="form-group">
			<div class="col-sm-4" >
				<input type="button" class="btn btn-primary" id="templateName"
					name="templateName" value="进度模板">
			</div>
			<span id="s1"></span>
		</div>
		<div class="container">
			<table class="table table-condensed table table-bordered"
				style="width: 1150px; table-layout: fixed; margin-top: 50px"
				align="center" id="table" border="1">
				<thead>
					<tr id="tr1" style="height: 30px;">
						<th class="td" style="width: auto";height:auto; ">系统名称</th>
						<th class="td " style="width: auto";height:auto;">责任人</th>
						<th class="td " style="width: auto";height:auto;">采集方式</th>
						<th class="td " style="width: auto";height:auto;">账号开通</th>
						<th class="td " style="width: auto";height:auto;">网络开通</th>
						<th class="td " style="width: auto";height:auto;">联调进展</th>
					</tr>
				</thead>
				<tbody>
					<tr id="tr2" style="height: 30px;">
						<td></td>
						<td></td>
						<td></td>
						<td><select>
								<option>进行中</option>
								<option>未完成</option>
								<option>完成</option>
						</select></td>
						<td><select>
								<option>进行中</option>
								<option>未完成</option>
								<option>完成</option>
						</select></td>
						<td><select>
								<option>进行中</option>
								<option>未完成</option>
								<option>完成</option>
						</select></td>
					</tr>
					<tr id="tr2" style="height: 30px;">
						<td></td>
						<td></td>
						<td></td>
						<td><select>
								<option>进行中</option>
								<option>未完成</option>
								<option>完成</option>
						</select></td>
						<td><select>
								<option>进行中</option>
								<option>未完成</option>
								<option>完成</option>
						</select></td>
						<td><select>
								<option>进行中</option>
								<option>未完成</option>
								<option>完成</option>
						</select></td>
					</tr>
					
				</tbody>
			</table>
			
			<!-- <button type="button" class="btn btn-primary"
				onclick="AddRow(document.getElementById('table'),1)">增加一行</button> 
			<button type="button" class="btn btn-primary" onclick="addCell()">增加一列</button>-->
			<input type="button" class="btn btn-primary" onclick="readHtml()" value="生成表格">
		</div>

	</div>



</body>
<script type="text/javascript">
	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}
	function addCell() {
		$("#tr2")
				.append(
						'<td><select><option>该列属性</option><option>文本框</option><option>下拉框</option></select></td>');
		$("#tr1")
				.append(
						'<td class="td"><input type="text" style="border:1px;height:46px;font-size:10px" placeholder="请输入列名"></td>');
		$("#tr3")
				.append(
						'<td class="td"><input type="text" placeholder="默认值" style="border:1px;height:46px;font-size:10px"></td>');
	}
	function readHtml() {
		var map = {};
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		for (var i = 0; i < rows; i++) {
			var cellValue = [];
			for (var j = 0; j < cells; j++) {
				valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
				cellValue[j] = valuej;
			}
			map[i.toString()] = cellValue;
		}
		var json = JSON.stringify(map);
		var params = JSON.stringify(json);

		var filename = $("#filename").val();
		console.log(filename);
		$.ajax({
			url : "${base}/excel/write",
			data : {
				"json" : params,
				"filename" : filename
			},
			type : "POST",
			success : function() {
				alert("更新成功");
			},
			async : true,
			cache : false
		});
	}
	function deleteExcel(obj) {
		var filename = obj.value;
		var param = "filename=" + filename;
		if (confirm("确认删除" + filename + "吗？")) {
			$.ajax({
				url : "${base}/excel/delete",
				data : param,
				dataType : "json",
				type : "POST",
				success : function(data) {
					//Location.href = "${base}/excel/list";
					alert("删除成功");
					location.reload();
				},
				async : true,
				cache : false
			});
		}
	}
	$(".trr").bind("mouseover", function() {
		$(this).css("background-color", "#eeeeee");
	})
	$(".trr").bind("mouseout", function() {
		$(this).css("background-color", "#ffffff");
	})
</script>
</html>


